<template>
  <div style="height:385px">
    <el-table :data="transportTaskList" style="width: 100%" class="top">
      <el-table-column prop="id" label="任务编号" />
      <el-table-column prop="startAgency" label="起始地" />
      <el-table-column prop="endAgency" label="目的地" />
      <el-table-column prop="licensePlate" label="车辆" />
      <el-table-column prop="status" label="任务状态">
        <template #default="{ row }">
          <div>{{ row.status === 2 ? "进行中" : "已完成" }}</div>
        </template>
      </el-table-column>
    </el-table>
    <vue-seamless-scroll
      :data="transportTaskList"
      class="seamless-warp"
      style="width: 100%"
      :class-option="classOption"
    >
      <el-table
        stripe
        :data="transportTaskList"
        style="width: 100%"
        class="bottom"
      >
        <el-table-column prop="id" label="任务编号" />
        <el-table-column prop="startAgency" label="起始地" />
        <el-table-column prop="endAgency" label="目的地" />
        <el-table-column prop="licensePlate" label="车辆" />
        <el-table-column prop="status" label="任务状态">
          <template #default="{ row }">
            <div>{{ row.status === 2 ? "进行中" : "已完成" }}</div>
          </template>
        </el-table-column>
      </el-table>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamlessScroll
  },
  props: {
    transportTaskList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  computed: {
    // 滚动条的配置项
    classOption() {
      return {
        step: 0.8, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.list
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 42.45, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .seamless-warp {
  height: 345px;
  overflow: hidden;
  .bottom .el-table__header-wrapper {
    display: none !important;
    width: 100%;
  }
  cursor: pointer;
}

::v-deep .top .el-table__body-wrapper {
  display: none !important;
}
</style>
